<link rel="stylesheet" href="css/timesRoom/timesRoomManage.css"/>

<div class="row">
	<div class="page-header" style=" margin: 0 0 5px !important;border-bottom: 1px dotted #e2e2e2;padding-bottom: 0px;padding-top: 0px;">
		<div class="clearfix">
			<div class="pull-left">
				<h4>
					<span data-i18n="钟房技师" class="blue">钟房技师</span>
					<small data-i18n="钟房管理">
						<i class="ace-icon fa fa-angle-double-right"></i>
						钟房管理
					</small>
				</h4>
			</div>
			<div class="pull-right">
				<div class="btn-group">
					<button id="btnFresh" class="btn btn-sm btn-info" data-i18n="刷新">
						<i class="ace-icon glyphicon glyphicon-repeat black icon-only"></i>
						刷新
					</button>
				</div>
				<div class="btn-group">
					<button id="btnClose" class="btn btn-sm" data-i18n="返回">返回</button>
				</div>
			</div>
		</div>
	</div>
	<div id="pageBody_timesRoom" class="col-sm-9 no-padding" style="margin-bottom:5px;">
		<div class="no-margin row" style="margin-bottom: 5px !important;"><!--well well-sm-->
			<div class="clearfix">
				<div id="spaRmtype" class="pull-left">
					<label style="margin-right:10px;">
						<input class="ace" type="radio" name="roomType" value="1" checked/>
						<span class="lbl" data-i18n="全部">全部</span>
					</label>
					<label style="margin-right:10px;">
						<input class="ace" type="radio" name="roomType" value="2" />
						<span class="lbl" data-i18n="包房">包房</span>
					</label>
					<label style="margin-right:10px;">
						<input class="ace" type="radio" name="roomType" value="3" />
						<span class="lbl" data-i18n="大厅">大厅</span>
					</label>
					<label style="margin-right:10px;">
						<input class="ace" type="radio" name="roomType" value="4" />
						<span class="lbl" data-i18n="女厅">女厅</span>
					</label>
					<label style="margin-right:10px;">
						<input class="ace" type="radio" name="roomType" value="5" />
						<span class="lbl" data-i18n="麻将室">麻将室</span>
					</label>
				</div>
				<div class="pull-right">
					<label>
						<input class="ace" type="checkbox" name="" id=""/>
						<span class="lbl" data-i18n="脏房报警">脏房报警</span>
					</label>
					<label>
						<input class="ace" type="checkbox" name="" id=""/>
						<span class="lbl" data-i18n="超时报警">超时报警</span>
					</label>
				</div>
			</div>
			<div id="statContainer" class="signList">
				<div class="color-item">
					<span class="color-bg" style="background: aquamarine;">
						0
					</span>
					空闲
				</div>
			</div>
		</div>
		<div id="pageFooter_timesRoom" class="pageFooter_timesRoom">
					
		</div>
	</div>
	<div class="col-sm-3  no-padding-right">
		<div class="widget-box transparent">
			<div class="widget-header">
				<h5>房间信息</h5>
			</div>
			<div id="roomMsg" class="widget-body">
				
			</div>
		</div>
	</div>
</div>
<script type="text/javascript"> 
    //加载资源文件
    var scripts =   [
		'js/plugin/jsonsql.js',
		"js/plugin/jquery.contextmenu.r2.js",
		"",
    ];
     //全窗口变量
	var ins_argjson={};
    $(".page-content-area").ace_ajax("loadScripts", scripts, function() {
        ins_argjson.operGrid = 1;
		var session = {session:{}};
		ins_argjson.session = session.session;
		document.title = "钟房管理";
		
		jf_initCondition();

		setSize();
		
		jf_retrieve();
		
		jf_bindEvent();

	})
	
	//条件初始化
	function jf_initCondition(){
		var arr = sysgetdict("#SPA房型");
		console.log(arr)
		var html = 	'<label>'+
						'<input class="ace" type="radio" name="roomType" value="" checked/>'+
						'<span class="lbl" data-i18n="全部">全部</span>'+
					'</label>';
		$(arr).each(function(k,v){
			html += '<label style="margin-left:10px;">'+
						'<input class="ace" type="radio" name="roomType" value="'+v.code+'"/>'+
						'<span class="lbl" data-i18n="全部">'+v.descript1+'</span>'+
					'</label>';
		})

		$("#spaRmtype").html(html);
	}

	function setSize(){
		// var top = $("#roomContainer").offset().top
		// var height = $(window).height();
		// var h = height- top - 80;
		// $("#roomContainer").css({"height":h,"overflow-y":"auto"});
		var top = $("#pageFooter_timesRoom").offset().top
		// if (self.frameElement && self.frameElement.tagName == "IFRAME") {
			// top = top + 40	
		// }
		var height = $(window).height();
		var h = height- top //- 60;
		$("#pageFooter_timesRoom").css({"height":h,"overflow-y":"auto"});

		// var ttt = $("#pageRightBtn").offset().top;
		// var hhh = $(window).height();
		// var hh = hhh - ttt //- 60;
		// var eh = (hh/20);
		// $("#pageRightBtn").find("button").css({"width":68,"height":eh,"line-height":eh/2+"px"});
	}

    function jf_retrieve(){
		if(!$.isFunction($().timesRoom_room_new)){
			$.ajaxSetup({ async: false, cache: false });
            $.getScript("js/timesRoom/jquery.service.timesRoom_room_new.js");
            $.ajaxSetup({ async: true});
		}
		$("#pageFooter_timesRoom").timesRoom_room_new({
			rmtype : $("input[name=roomType]:checked").val(),
			roomMsgId : "roomMsg",
			dataBack : function(){
				
			},
			closeBack : function(){
				
			},
			statBack : function(data){
				if(data!=null){
					var json = $.parseJSON(data);
					var html = 	'';
					var leftHtml = '<div style="display:flex;">'
					var rightHtml = '<div style="display:flex;">'
					var size = $("#statContainer").find(".color-item.active").size();
					var status = ""
					if(size==1){
						status = $("#statContainer").find(".color-item.active").data("status");
					}
					$(json).each(function(k,v){
						var active = "";
						var style =  "";
						if(status==v.status){
							active = " active";
							style = ' style="border-color:'+v.bgcolor+';"'
						}
						if(v.stype=="房态"){
							rightHtml +='<div class="color-item'+active+'" data-status="'+v.status+'" data-color="'+v.bgcolor+'"'+style+'>'+
											'<span class="color-bg" style="background:'+v.bgcolor+';color:'+v.tcolor+';">'+
												(v.qty||0)+
											'</span>'+
											v.name+
										'</div>';
						}else{
							leftHtml +='<div class="color-item'+active+'" data-status="'+v.status+'" data-color="'+v.bgcolor+'"'+style+'>'+
											'<span class="color-bg" style="background:'+v.bgcolor+';color:'+v.tcolor+';">'+
												(v.qty||0)+
											'</span>'+
											v.name+
										'</div>';
						}
					})
					html += leftHtml + '</div>' + rightHtml + '</div>';
					$("#statContainer").html(html);
					$("#statContainer").find(".color-item:last").css({"margin-right":"0"});
					$("#statContainer").find(".color-item").unbind("click").click(function(){
						if($(this).hasClass("active")){
							$(this).removeClass("active");
							$(this).css("border-color","");
						}else{
							$("#statContainer").find(".color-item").removeClass("active");
							$(this).addClass("active")
							var color = $(this).data("color");
							$(this).css({"border-color":color});
						}
						jf_retrieve();
					})
				}
			}
		});

    }
    
    function jf_bindEvent(){
		//关闭
		$("#btnClose").click(function(){
			history.go(-1);
		})
		
		//开牌
		$("#btnOpen").click(function(){
			
		})

		//窗口大小变化
		$(window).resize(function(){
			setSize();
		})

		$("input[name=roomType]").change(function(){
			jf_retrieve();
		})

		//刷新
		$("#btnFresh").click(function(){
			jf_retrieve();
		})
	}
</script>